<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Themes</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>

	<nav class="navbar navbar-expand-lg navbar-light bg-light bg-white p-5">
		<div class="container">
			<a class="navbar-brand" href="#">Themes</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>

			<div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo02">
				<ul class="navbar-nav">
					<li class="nav-item active pl-2 pr-5">
						<a class="nav-link" href="#">Themes</a>
					</li>
					<li class="nav-item pl-2 pr-5">
						<a class="nav-link" href="#">About</a>
					</li>
					<li class="nav-item pl-2 pr-5">
						<a class="nav-link" href="#">FAQ</a>
					</li>
				</ul>
			</div>
		</div>
	</nav>
	
	<div class="main">
		<div class="main-banner mb-5">
			<div class="container text-center">
				<h1 class="pt-3 pb-3 pl-5 pr-5 title d-inline-block">B</h1>
				<h2 class="mt-3">Themes</h2>
				<p class="mt-4 mb-4 text-secondary">Customize and extend</p>
				<a href="#" class="btn btn-primary pl-4 pr-4 btn-col">Explore</a>
			</div>
		</div>
		<div class="main-inner pt-5 pb-5">
			<div class="container">
				<div class="row text-center">
					<div class="col-md-4">
						<img src="img/m-1.png" class="pb-3" alt="">
						<h3>Components and examples</h3>
						<p class="text-secondary">Each theme fratures new components</p>
					</div>
					<div class="col-md-4">
						<img src="img/m-2.png" class="pb-3" alt="">
						<h3>Tons of variables</h3>
						<p class="text-secondary">Theme components inherit much</p>
					</div>
					<div class="col-md-4">
						<img src="img/m-3.png" class="pb-3" alt="">
						<h3>Source files and tools</h3>
						<p class="text-secondary">Each theme includes components</p>
					</div>
				</div>
			</div>
		</div>
		<div class="main-team pt-5 pb-5">
			<div class="container">
				<div class="row text-center">
					<div class="col-md-4">
						<div class="card">
							<img class="card-img-top img-t" src="img/insta-2.jpg" alt="Card image cap">
							<div class="card-body mt-5">
								<h5 class="card-title">Jacob Thornton</h5>
								<p class="card-text">Creator of bootstrap.engineer at Twitter & Medium,Founder of Bumpers.</p>
								<a href="#" class="btn btn-primary pl-4 pr-4 mb-3 btn-col">View GitHub</a>
							</div>
							<div class="box rounded-circle">
								<img src="img/avatar-fat.jpg" class="card-img-top rounded-circle img-b" alt="">
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="card">
							<img class="card-img-top img-t" src="img/insta-1.jpg" alt="Card image cap">
							<div class="card-body mt-5">
								<h5 class="card-title">Mark Otto</h5>
								<p class="card-text">Design at GitHub.Creator of Bootstrap. Previously at Twitter. Huge nerd.</p>
								<a href="#" class="btn btn-primary pl-4 pr-4 mb-3 btn-col">View GitHub</a>
							</div>
							<div class="box rounded-circle">
								<img src="img/avatar-mdo.jpg" class="card-img-top rounded-circle img-b" alt="">
							</div>
						</div>
					</div>

					<div class="col-md-4">
						<div class="card">
							<img class="card-img-top img-t" src="img/insta-3.jpg" alt="Card image cap">
							<div class="card-body mt-5">
								<h5 class="card-title">Dave Gamache</h5>
								<p class="card-text">Design at Twitter & Medium.Strarting something new soon;).</p>
								<a href="#" class="btn btn-primary pl-4 pr-4 mb-3 btn-col">View GitHub</a>
							</div>
							<div class="box rounded-circle">
								<img src="img/avatar-dhg.png" class="card-img-top rounded-circle img-b" alt="">
							</div>
						</div>
					</div>

				</div>

			</div>
		</div>








		<div class="main-bottom mb-5">
			<div class="container">
				<div class="card">
				  <div class="card-body">
				  	<div class="cear float-left">
					    <h5 class="card-title">C'mon,check out the themes!</h5>
					    <p class="card-text">Now you know what we;re aboout,so peep the goods!</p>
				    </div>
				    <a href="#" class="btn btn-primary btn-col pr-4 pl-4 pt-2 pb-2 mr-5 mt-2 float-right">Explore</a>
				  </div>
				</div>
			</div>
		</div>



	</div>


	<footer class="text-center pt-4 pb-5">
		<div class="container p-5">
			<a href="#" class="pl-3 pr-3">About</a>
			<a href="#" class="pl-3 pr-3">Terms</a>
			<a href="#" class="pl-3 pr-3">Privacy</a>
			<a href="#" class="pl-3 pr-3">Licenses</a>
			<a href="#" class="pl-3 pr-3">FAQ</a>
			<a href="#" class="pl-3 pr-3">Bootstrap</a>
		</div>
	</footer>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>